Step by Step Guide - Mobile Flashcards

Planning Stage 📐

Step 1 - Draw All of the Views of the App

We need to determine the look and functionality of each view in your app. One of the best approaches is to draw each view of the app on paper so that you'll have a good idea of what information and data you're planning to have on each page.

Instead of paper and pencil, you can be a bit more digital and use software for creating mockups. Check your mock against the project rubric to make sure that you have all of the required features.

Step 2 - Break Each View Into a Hierarchy of Components

For this step, do the following:

• draw boxes around every component; and
• arrange our components into a hierarchy

Step 3 - Plan out How Your App Will Manage Data

Your project must make use of AsyncStorage to store your data. If are planning to use Redux (which we encourage you to do in order to get more practice with it), make sure to plan out which data will go into the store and which components (if any) will hold their own data. Please feel free to follow the Step by Step Guide for React/Redux Apps.

Coding Stage🔨

Step 1 - Create the Required Views.

For this step, don't style your components, and don't worry about putting any data or functionality in them; just make bare-bones components.

Step 2 - Use React Native Navigation to Connect the Views.

Step 3 - Work on the Views and State.

Work on the views and state in accordance with the Step by Step Guide for React Apps or the Step by Step Guide for React/Redux Apps, depending on whether you choose to use Redux.

Step 4 - Add AsyncStorage.

Step 5 - Add notifications.

Step 6 - Add finishing touches and make sure the project meets the rubric.